<template>
	<view class="container">
		<view class="row header padding" id="header">
			<text class="title">更多菜品等你来冠名</text>
			<view class="row auto-left" @click="toNamingList">
				<!-- <text class="box">夺冠名></text> -->
			
				<image class="boxname" style="width: 150rpx; height:60rpx;" src="/static/name.gif"></image>
			</view>
		</view>
		<view class="row main">
			<scroll-view :scroll-y="true" class="col cate" :style="{height: mainHeight}">
				<view class="row item" :class="index==currentCategoryIndex?'actice':''" v-for="(item,index) in categoryData"
				 v-bind:key="index" @click="changeCate" :data-index="index">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view :scroll-y="true" class="col goods-list" :style="{height: mainHeight}" @scrolltoupper="scrollToUpper"
			 @scrolltolower="scrollToLower">
				<view class="col goods-item" v-for="(item,index) in goodsList" v-bind:key="index">
					<view class="row goods-header">
						<image :src="item.goods_naming.member_avatar?item.goods_naming.member_avatar:url+'/static/imgs/user-color.png'"></image>
						<view class="user-name " >【{{item.goods_naming.name||'未冠名'}}】</view>
						<view class="goods-name " >{{item.name}}</view>
					</view>
					<view class="row goods-content">
						<image class="cover-image" :src="item.image" mode="aspectFill"></image>
						<view class="col goods-content-main">
							<view class="description">
								<text v-if="item.goods_naming.title">{{item.goods_naming.title}}</text>
								<view v-else class="col status-none">
									<text>未冠名</text>
									<text>0.01元即可冠名。</text>
								</view>
							</view>
							<view class="row">
								<view class="price">¥{{item.goods_price}}</view>
								<view class="row operate auto-left" v-if="item.sale_status==1">
									<image @click.stop="descreament" :data-index="index" data-type="goods-list" class="descreament" :src="url+'/static/imgs/descreament.png'"
									 v-if="item.cart_num>0"></image>
									<view class="number" v-if="item.cart_num>0">{{item.cart_num}}</view>
									<image @click.stop="increament" :data-index="index" data-type="goods-list" class="increament" :src="url+'/static/imgs/increament.png'"></image>
								</view>
								<view class="row operate auto-left" v-else>
									<image class="goods-status-none" :src="url+'/static/imgs/goods-status-none.png'"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="row paginate">
					<text>
						<block>{{config.show_loading?config.loading_msg:''}}</block>
						<block>{{config.show_finish?config.finish_msg:''}}</block>
						<block>{{config.show_empty?config.empty_msg:''}}</block>
					</text>
				</view>
			</scroll-view>
		</view>
		<view style="height: 98rpx;"></view>
		<view class="row bottom" id="bottom">
			<view class="row cart-view" @click.stop="changeMask">
				<text class="count">合计：</text>
				<text class="price">¥{{cartList.cart_total.amount||'0.00'}}</text>
				<view class="row cart" @click.stop="changeMask">
					<image :src="url+'/static/imgs/cart.png'"></image>
					<view class="number" v-if="cartList.cart_total.total>0">{{cartList.cart_total.total}}</view>
				</view>
			</view>
			<view class="row confirm auto-left" @click.stop="toConfirmOrder">买单</view>
		</view>

		<!-- 弹出阴影 -->
		<view @click.stop="changeMask" @touchmove.stop="catchtouchmove" class="mask" v-if="showMask"></view>
		<!-- 弹出商品信息 -->
		<view class="col cart-mask" v-if="showMask">
			<view class="row cart-mask-header">
				<text>已选商品</text>
				<view class="auto-left">
					<view class="row delete" @click="clearCart">
						<image :src="url+'/static/imgs/delete.png'"></image>
						<text>清空</text>
					</view>
				</view>
			</view>
			<view class="cart-table">
				<view class="row tr t-header">
					<text class="td">商品名称</text>
					<text class="td">商品价格</text>
					<text class="td"></text>
				</view>
				<scroll-view :scroll-y="true" style="height:400rpx">
					<view class="row tr t-body" v-for="(item,index) in cartList.cart_list" v-bind:key="index">
						<text class="td">{{item.goods_info.name}}</text>
						<text class="td">￥{{item.goods_info.goods_price}}</text>
						<view class="td">
							<view class="row operate auto-left">
								<image @click.stop="descreament" :data-index="index" data-type="cart-list" class="descreament" :src="url+'/static/imgs/descreament.png'"
								 v-if="item.goods_num>0"></image>
								<view class="number" v-if="item.goods_num>0">{{item.goods_num}}</view>
								<image @click.stop="increament" :data-index="index" data-type="cart-list" class="increament" :src="url+'/static/imgs/increament.png'"></image>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<style>
	@import url("../../../common/css/goods-category.css");
</style>
<script>
	var app = getApp();
	import http from "../../../common/js/request.js";
	import common from "../../../common/js/function.js";
	export default {
		data() {
			return {
				config: {}, //分页配置
				busy: false, //当前上拉加载的忙碌状态
				showMask: false,
				url: app.globalData.baseImgUrl,
				store_id: app.globalData.storeId,
				categoryData: [],
				currentCategoryIndex: 0,
				goodsList: [],
				cartList: [],
				bottomHeight: 0,
				headerHeight: 0,
				mainHeight: 0,
				storeInfo: []
			}
		},
		onShow() {
			var that = this;
			common.verifyAuth(() => {
				that._load();
			}, true);
		},
		onReady() {
			console.log(1);
			var that = this;
			const query = uni.createSelectorQuery().in(this);
			query.select('#header').boundingClientRect(data => {
				that.headerHeight = data.height;
			}).exec();
			const queryBottom = uni.createSelectorQuery().in(this);
			queryBottom.select('#bottom').boundingClientRect(data => {
				that.bottomHeight = data.height;
				console.log(that.bottomHeight, that.headerHeight);
				uni.getSystemInfo({
					success: function(res) {
						that.mainHeight = res.windowHeight - that.bottomHeight - that.headerHeight + 'px'
					}
				});
			}).exec();


		},
		methods: {
			_load() {
				var that = this;
				that.goodsList = [];
				that.categoryData = [{
					id: 0,
					name: '全部'
				}];
				that.getCategoryData(() => {
					that._setConfig(() => {
						that.getGoodsList();
						that.getStoreInfo();
					});
				});
				that.getCartList();
			},
			_setConfig(callback = '') {
				var that = this;
				that.config = common.getPageConfig();
				typeof callback == 'function' ? callback() : ''
			},
			//店铺详情
			getStoreInfo() {
				var that = this;
				http.post('/api/v1/store/store_detail', {
					store_id: that.store_id
				}, res => {
					that.storeInfo = res.datas;
				});
			},
			//获取商品分类
			getCategoryData(callback) {
				var that = this;
				http.post('/api/v1/goods/class_list', {
					store_id: that.store_id
				}, (res) => {
					that.categoryData = that.categoryData.concat(res.datas);
					callback();
				});
			},
			//获取商品列表
			getGoodsList() {
				var that = this;
				if (that.config.show_finish) return false;
				that.config.show_loading = true; //展示loading
				var current_page = that.config.current_page;
				http.post('/api/v1/goods/goods_list', {
					class_id: that.categoryData[that.currentCategoryIndex].id,
					page: current_page,
					store_id: that.store_id
				}, res => {
					console.log(res.datas)
					// for(var i in res.datas){
					// 	  if (res.datas[i].name.length > 8) {
					// 	                    res.datas[i].name = res.datas[i].name.slice(0, 8)+"..."
					// 	      }else{
					// 			   res.datas[i].name = res.datas[i].name 
					// 		  }
					// }
					that.goodsList = that.goodsList.concat(res.datas);
					that.config.show_loading = false; //关闭loading
					
					if (res.datas.length == 0) {
						if (current_page == 1) {
							that.config.show_empty = true;
						} else {
							that.config.show_finish = true;
						}
					}
					that.busy = false;
				});
			},
			scrollToLower() {
				var that = this;
				console.log('toBottom');
				if (that.busy == true) return false;
				that.busy = true;
				that.config.current_page += 1;
				that.getGoodsList();
			},
			scrollToUpper() {

			},
			//分类切换
			changeCate(e) {
				var that = this;
				that.currentCategoryIndex = e.currentTarget.dataset.index;
				that.goodsList = [];
				that.busy = false;
				that._setConfig(() => {
					that.getGoodsList();
				});
			},
			//商品列表-减少购物车中商品数量
			descreament(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				var type = e.currentTarget.dataset.type;
				switch (type) {
					case 'goods-list':
						var goods_id = that.goodsList[index].id;
						break;
					case 'cart-list':
						var goods_id = that.cartList.cart_list[index].goods_info.id;
						break;
					default:
						break;
				}
				http.post('/api/v1/cart/reduce_cart', {
					store_id: that.store_id,
					goods_id
				}, res => {
					if (res.state != 1) {
						uni.showToast({
							title: res.datas,
							icon: 'none'
						});
					} else {
						switch (type) {
							case 'goods-list':
								that.goodsList[index].cart_num--;
								break;
							case 'cart-list':
								for (let i in that.goodsList) {
									if (that.goodsList[i].id == goods_id) {
										that.goodsList[i].cart_num--;
									}
								}
								break;
							default:
								break;
						}
						that.getCartList();
					}
				});
			},
			//商品列表-增加购物车中商品数量
			increament(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				var type = e.currentTarget.dataset.type;
				switch (type) {
					case 'goods-list':
						var goods_id = that.goodsList[index].id;
						break;
					case 'cart-list':
						var goods_id = that.cartList.cart_list[index].goods_info.id;
						break;
					default:
						break;
				}
				http.post('/api/v1/cart/add_cart', {
					store_id: that.store_id,
					goods_id
				}, res => {
					if (res.state != 1) {
						uni.showToast({
							title: res.datas,
							icon: 'none'
						});
					} else {
						switch (type) {
							case 'goods-list':
								that.goodsList[index].cart_num++;
								break;
							case 'cart-list':
								for (let i in that.goodsList) {
									if (that.goodsList[i].id == goods_id) {
										that.goodsList[i].cart_num++;
									}
								}
								break;
							default:
								break;
						}
						that.getCartList();
					}
				});
			},
			//清空购物车
			clearCart() {
				var that = this;
				uni.showModal({
					title: '清空',
					content: '您确定要清除购物车内所有商品吗？',
					success: res => {
						if (res.confirm) {
							http.post('/api/v1/cart/empty_store_cart', {
								store_id: that.store_id,
							}, res => {
								if (res.state != 1) {
									uni.showToast({
										title: res.datas,
										icon: 'none'
									});
								} else {
									that.getCartList();
									for (let index in that.goodsList) {
										that.goodsList[index].cart_num = 0;
									}
								}
							});
						}
					}
				});
			},
			//购物车列表
			getCartList() {
				var that = this;
				http.post('/api/v1/cart/cart_list', {
					store_id: that.store_id
				}, res => {
					that.cartList = res.datas;
				});
			},
			//遮罩状态切换
			changeMask() {
				this.showMask = !this.showMask;
			},
			//阻止遮罩滑动
			catchtouchmove() {
				return false;
			},
			//跳转至我要冠名
			toNamingList() {
				var that = this;
				uni.navigateTo({
					url: '/pages/store/naming/list/list'
				})
			},
			//跳转至买单页面
			toConfirmOrder() {
				var that = this;
				if (that.storeInfo.status != 1) {
					uni.showModal({
						title: '提示',
						content: '该店铺正在休息，不能下单哦~',
						showCancel: false,
					});
				} else if (that.cartList.cart_total.total <= 0) {
					uni.showModal({
						title: '提示',
						content: '购物车内没有商品，不能下单哦~',
						showCancel: false,
					});
				} else {
					uni.navigateTo({
						url: '/pages/store/order/confirm/confirm'
					});
				}

			},
		}
	}
</script>
